<template>
  <div class="cartooncomment">
    <div class="cartooncomment-top">
      <van-sticky>
        <van-nav-bar :title="title" :border="false">
          <template #left>
            <van-icon
              @click="onClickLeft"
              name="cross"
              size="20"
              color="#fff"
            />
          </template>
        </van-nav-bar>
      </van-sticky>
    </div>

    <div class="cartooncomment-bootom">
      <div class="cartooncomment-bootom-score">
        <div class="bootom-score">{{score}}</div>
        <div class="bootom-score-right">
          <div class="bootom-score-right-top">综合评分</div>
          <div>
            <van-rate allow-half v-model="fen1" color="#ffd21e" readonly />
          </div>
        </div>
        <div class="container-bottom">
            <div class="an" @click="anHot">
                <div class="container-bottom-item">
                <van-icon name="wap-nav" />
                <div>{{hot}}</div>
                </div>
            </div>
        </div>
      </div>
      <div class="cartooncomment-bootom-container">
        <div class="container">
          <div class="container-top">
            <van-tabs v-model="active" sticky :offset-top="Width" @click="onClick">
              <van-tab title="短评">
                  <van-list
                        v-model="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        @load="onLoad"
                        :immediate-check="false"
                    >
                <div ref="bootom">
                    <div class="container-top-item" v-for="(item,index) in sortDuan" :key="index">
                  <div class="container-top-item-box">
                    <div class="container-top-item-boximg" @click="gotoUser(item)">
                      <img :src="item.face" alt="" />
                    </div>
                    <div class="container-top-item-boxcon">
                      <div class="item-boxcon">
                        <div class="item-boxcon-div">{{item.nick_name}}</div>
                        <van-rate
                          size="12"
                          allow-half
                          v-model="item.score"
                          color="#ffd21e"
                          readonly
                        />
                        <span class="item-boxcon-span">{{item.mtime}}</span>
                      </div>
                      <div class="item-boxcon-middle">{{item.content}}</div>
                      <div class="item-boxcon-bottom">
                        <div :class="item.isDian === true?'active':''" @click="dian($event,item)">
                          <van-icon size="15" name="good-job-o" />
                          <span>{{item.like_count | forNumber}}</span>
                        </div>
                        <div class="item-boxcon-bottom-left">
                          <van-icon
                            size="15"
                            name="ellipsis"
                            @click="showShare = true"
                          />
                          <van-share-sheet
                                v-model="showShare"
                                title="举报"
                                @select="onSelect"
                            />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                </div>
                </van-list>
              </van-tab>
              <van-tab title="长评">
                <van-list
                        v-model="loading1"
                        :finished="finished1"
                        finished-text="没有更多了"
                        @load="onLoad1"
                        :immediate-check="false"
                    >
                        <div class="container-top-item" v-for="(item,index) in LongPing" :key="index">
                        <div class="container-top-item-box">
                            <div class="container-top-item-boximg" @click="gotoUser(item)">
                            <img :src="item.face" alt="" />
                            </div>
                            <div class="container-top-item-boxcon">
                            <div class="item-boxcon">
                                <div class="item-boxcon-div">{{item.nick_name}}</div>
                                <van-rate
                                size="12"
                                allow-half
                                v-model="item.score"
                                color="#ffd21e"
                                readonly
                                />
                                <span class="item-boxcon-span">{{item.mtime}}</span>
                            </div>
                            <div class="item-boxcon-title auto-text">{{item.review_title}}</div>
                            <div class="item-boxcon-middle span">{{item.content}}</div>
                            <div class="item-boxcon-bottom">
                                <div class="a">
                                <div>
                                  <van-icon name="chat-o" size="15" />
                                <span class="span1">{{item.comment_count}}</span>
                                </div>
                                <div :class="item.isDian === true?'active':''" @click="dian($event,item)">
                                  <van-icon size="15" name="good-job-o" />
                                  <span class="span1">{{item.like_count | forNumber}}</span>
                                </div>
                                </div>
                                <div class="item-boxcon-bottom-left">
                                <van-icon
                                    size="15"
                                    name="ellipsis"
                                    @click="showShare = true"
                                />

                                <van-share-sheet
                                    v-model="showShare"
                                    title="举报"
                                    @select="onSelect"
                                />
                                </div>
                            </div>
                            </div>
                        </div>
                        </div>
                </van-list>
              </van-tab>
            </van-tabs>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CartoonComment",
  data() {
    return {
        IsLongding: false,

      loading: false,
      finished: false,

      loading1: false,
      finished1: false,
      value: 4.5,
      active: 0,

      showShare: false,

      //   标题
      title: "",
    //   长短评
    number:0,

    screenWidth: null,  //屏幕尺寸
    Width:0,

    // 短评
    sortDuan:[],
    // 长评
    LongPing:[],

    // 页数
    pageSize:15,
    pageNum:1,
    pageSize1:15,
    pageNum1:1,
    id:'',
    score:0,
    fen1:0,
    
    // 短评时间长评时间
    duanTime:false,
    changTime:false,
    hot:"按热度"
    };
  },
  created() {
    this.screenWidth = document.body.clientWidth;
    this.screenWidth = document.body.clientWidth;
    this.Width = Math.floor((46 / 375) * Number(this.screenWidth) * 100) / 100;
    
    let fen = this.$route.query.score;
    this.score = Number(fen).toFixed(1);
    this.fen1 = this.score / 2;
    this.id = this.$route.query.id
    this.title = this.$route.query.title;
    this.getDuan(this.$route.query.id);
    this.getLong(this.$route.query.id)

    // this.onClick()
  },
  mounted() {
    this.screenWidth = document.body.clientWidth;
    window.onresize = () => {
      //屏幕尺寸变化就重新赋值
      return (() => {
        this.screenWidth = document.body.clientWidth;
        this.Width =
        Math.floor((46 / 375) * Number(this.screenWidth) * 100) / 100;
      })();
    };
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },

    onSelect() {
      this.showShare = false;
    },

    // 短评
    getDuan(id){
        this.axios({
            methods:'GET',
            url:'ListReviews',
            params:{
                comicId:id,
                type:this.active,
                pageSize:this.pageSize,
                pageNum:this.pageNum,
            }
        }).then(result=>{
            this.IsLongding = true;
            this.sortDuan = result.data.data.reviews;
            for(let i = 0; i < this.sortDuan.length; i++){
                this.sortDuan[i].isDian=false
            }
        })
    },
    getLong(id){
        this.axios({
            methods:'GET',
            url:'ListReviews',
            params:{
                comicId:id,
                type:1,
                pageSize:this.pageSize,
                pageNum:this.pageNum,
            }
        }).then(result=>{
            this.LongPing = result.data.data.reviews;
            for(let i = 0; i < this.LongPing.length; i++){
                this.LongPing[i].isDian=false
            }
            
        })
    },

    // 触底
    onLoad(){
        this.pageNum++;
        this.loading = true;
        this.axios({
            methods:'GET',
            url:'ListReviews',
            params:{
                comicId:this.id,
                type:this.active,
                pageSize:this.pageSize,
                pageNum:this.pageNum,
            }
        }).then(result=>{
            
            this.loading = false;
            if(result.data.data.reviews.length === 0){
                this.finished = true
            }
            this.sortDuan.push(...result.data.data.reviews)
        })
    },
    onLoad1(){
        
        this.pageNum1++;
        this.loading1 = true;
        this.axios({
            methods:'GET',
            url:'ListReviews',
            params:{
                comicId:this.id,
                type:1,
                pageSize:this.pageSize1,
                pageNum:this.pageNum1,
            }
        }).then(result=>{
            
            this.loading1 = false;
            if(result.data.data.reviews.length === 0){
                this.finished1 = true
            }
            this.LongPing.push(...result.data.data.reviews)
        })
    },
    
    // 按热度
    anHot(){
        if(this.active === 0){
            if(this.duanTime === false){
                this.hot = "按时间";
                this.duanTime = true;
                this.axios({
                    methods:'GET',
                    url:'ListReviews',
                    params:{
                        comicId:this.id,
                        type:this.active,
                        pageSize:this.pageSize,
                        pageNum:this.pageNum,
                        sort:1,
                    }
                }).then(result=>{
                    this.sortDuan = result.data.data.reviews;
                    for(let i = 0; i < this.sortDuan.length; i++){
                        this.sortDuan[i].isDian=false
                    }
                })

            }else{
                this.hot = "按热度";
                this.duanTime = false;
                this.getDuan(this.id);
            }
        }else if(this.active === 1){
            if(this.changTime === false){
                this.hot = "按时间";
                this.changTime = true;
                this.axios({
                    methods:'GET',
                    url:'ListReviews',
                    params:{
                        comicId:this.id,
                        type:1,
                        pageSize:this.pageSize,
                        pageNum:this.pageNum,
                        sort:1,
                    }
                }).then(result=>{
                    this.LongPing = result.data.data.reviews;
                    for(let i = 0; i < this.LongPing.length; i++){
                        this.LongPing[i].isDian=false
                    }
                })

            }else{
                this.hot = "按热度";
                this.changTime = false;
                this.getLong(this.id)
            }
        }
    },
    onClick(){
        if(this.active === 0){
            if(this.duanTime === false){
                this.hot = "按热度";
            }else{
                this.hot = "按时间";
            }
        }else{
            if(this.changTime === false){
                this.hot = "按热度";
            }else{
                this.hot = "按时间";
            }
        }
    },

    // 跳转用户页面
    gotoUser(item){
        
        this.$router.push({name:"CartoonUser",query:{id:item.uid}})
    },

     // 点赞
    dian(e,item){
      if(item.isDian === false){
        item.like_count++;
        item.isDian = true;
      }else{
        item.like_count--;
        item.isDian = false;
      }
    }

  },
};
</script>

<style lang="less" scoped>
.a{
  display: flex;
}
.active{
  color: #33AAFA;
}
.container-top-item:last-child{
    border: none;
}
.loading{
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.an{
    background-color: #695B6A;
    padding: 5px 10px;
    border-radius: 15px;
}
/deep/.van-overlay{
    background-color: rgba(74,74,75, 0.1);
}
/deep/.van-share-sheet__options{
    padding: 0;
}
/deep/.van-nav-bar__content {
  background: linear-gradient(to right, #3c3650, #40344a, #453446);
  color: #fff;
}
/deep/.van-nav-bar__title {
  color: #fff;
}
/deep/.van-icon-wap-nav {
  padding-top: 2px;
}
/deep/.van-tabs__line {
  background-color: black;
}
.item-boxcon-title {
  font-size: 15px;
  padding-top: 3px;
  font-weight: 700;
  z-index: 9;
  color: black;
  width: 310px;
}
.cartooncomment-top {
  width: 100%;
}
.span1 {
  margin-right: 10px;
  padding-left: 2px;
  padding-top: 1px;
}
.a {
  padding-left: 10px;
}
.item-boxcon-middle {
  font-size: 13px;
  padding-top: 5px;
  width: 310px;
}
.item-boxcon-div {
  padding-bottom: 3px;
}
.cartooncomment-bootom-score {
  padding: 30px 10px 10px 10px;
  background: linear-gradient(to right, #3c3650, #40344a, #453446);
  display: flex;
  .bootom-score {
    font-size: 50px;
    color: #fff;
  }
  .bootom-score-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 10px;
    .bootom-score-right-top {
      color: #b6adbf;
      padding-bottom: 2px;
    }
  }
}
.cartooncomment-bootom-container {
  padding: 0px 10px;
  .container {
    display: flex;
    .container-top {
      flex: 1;
      position: relative;
    }
  }
}
.container-bottom {
//   height: 43px;
//   line-height: 43px;
//   position: absolute;
//   top: 0;
//   right: 0;
    margin-left: auto;
    display: flex;
    padding-right: 12px;
    font-size: 13px;
    align-items: center;
  .container-bottom-item {
    display: flex;
    align-items: center;
  }
}
.container-top-item {
    border-bottom: 0.02667rem solid #e6e6e6;
  padding: 10px 0px;
  .container-top-item-box {
    display: flex;
    .container-top-item-boximg {
      width: 35px;
      height: 35px;
      border-radius: 50%;
      overflow: hidden;
      background-color: #b6adbf;
      >img{
          width: 100%;
          height: 100%;
          display: block;
      }
    }
    .container-top-item-boxcon {
      flex: 1;
      margin-left: 10px;
      color: #737277;
      padding-bottom: 10px;
      .item-boxcon-span {
        padding-left: 10px;
      }
    }
    .item-boxcon-bottom {
      display: flex;
      padding-top: 10px;
      .item-boxcon-bottom-left {
        margin-left: auto;
      }
    }
  }
}
</style>